<template>
	<div class="x-multifile-upload">
		<el-upload drag :action="$ala.clientUploadApi()" :on-success="uploadSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false" multiple :headers="$ala.header('Api/StorageFile/upload')" accept=".jpg,.jpeg,.png,.gif">
			<i class="el-icon-upload"></i>
			<div>将文件拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<div class="multifile-upload_ul" v-if="viewModel.length!==0">
			<div class="multifile-upload_li" v-for="(item,index) in viewModel" :key="index">
				<img class="multifile-upload_img" :src=" $ala.urlImage(item.path)" />
				<div class="multifile-upload_txt">{{item.name}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			dataModel: {}
		},
		data() {
			return {
				viewModel: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if (this.dataModel) {
					this.viewModel = this.dataModel
				}
			},
			uploadSuccess(response, file, fileLis) {
				if (response.status === 1) {
					this.viewModel.push(response.result)
				}
			},
			beforeAvatarUpload(file) {
				var isJPEG = file.type === 'image/jpeg'
				var isPNG = file.type === 'image/png'
				var isJPG = file.type === 'image/jpg'
				var isGIF = file.type === 'image/gif'
				if (!isJPEG && !isPNG && !isJPG && !isGIF) {
					this.$message.error('图片只能是 JPG/PNG/JPEG 格式!')
					return isJPEG && isPNG && isJPG
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler() {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>
<style lang="scss">
	@import './var.scss';
</style>